<template>
  <div :class="['global-mockname__module', size]">
    <b class="nickname__item">{{comNickname}}</b>
    <img draggable="false" :src="comGender | gender" class="gender__item" />
  </div>
</template>

<script>
import gender0 from '@/assets/wan_sex_w.png';
import gender1 from '@/assets/wan_sex_m.png';
import gender2 from '@/assets/sex-icon.png';

export default {
    filters: {
        gender(sex) {
            const obj = { 0: gender0, 1: gender1, 2: gender2 };
            return obj[sex] || gender2;
        },
    },
    props: {
        userInfo: {
            type: Object,
            default: () => ({}),
        },
        nickname: {
            type: String,
            default: '用户昵称',
        },
        gender: {
            type: [Number, String],
            default: 3,
        },
        size: String,
    },
    computed: {
        comNickname() {
            return this.userInfo.nickname || this.nickname;
        },
        comGender() {
            return this.userInfo.gender || this.gender;
        },
    },
};
</script>

<style lang="less">
.global-mockname__module {
  white-space: nowrap;
  display: flex;
  align-items: center;
  .nickname__item,
  .gender__item {
    display: inline-block;
    margin: 0;
    margin-right: 5px;
  }
  & :last-child {
    margin-right: 0;
  }
  &.big {
    > .nickname__item {
      line-height: 18px;
      font-size: 18px;
      color: #fff;
    }
  }
  .gender__item {
    width: 15px;
    pointer-events: none;
  }
}
</style>
